<template>
   <div class="view-container">
      <!--面包屑 -->
      <el-breadcrumb :separator-icon="ArrowRight">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>后台设置</el-breadcrumb-item>
         <el-breadcrumb-item>轮播图</el-breadcrumb-item>
      </el-breadcrumb>
      <ShoBlock title="轮播图"></ShoBlock>
      <!--选择项 -->
      <div class="Select">
         <el-button type="success" @click="AddBannerView=true">添加</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%" empty-text="没有数据!" #default="scope">
         <el-table-column v-for="item, index in column" v-model="column" :prop="item.prop" :label="item.label"
            :width="item.width">
         </el-table-column>
         <el-table-column fixed="right" label="操作" show-overflow-tooltip width="200px">
            <template #default>
               <main>
                  <el-button type="success" @click="handleUpdate(scope.row); EditBannerView = true">编辑</el-button>
                  <el-button type="success" @click="handleUpdate(scope.row); DeleteBannerView = true">删除</el-button>
               </main>
            </template>
         </el-table-column>
      </el-table>
   </div>
   <AddBanner v-model="AddBannerView" />
   <EditBanner v-model="EditBannerView" :data="Row" />
   <DeleteBanner v-model="DeleteBannerView" :data="Row" />
</template>

<script setup lang="ts">
import ShoBlock from '../../component/ShoBlock.vue'
import { Timer } from '@element-plus/icons-vue'
import { reactive, ref, onMounted } from 'vue'
import { getBannerList_admin } from '../../service/Banner'
import AddBanner from './component/AddBanner.vue'
import EditBanner from './component/EditBanner.vue'
import DeleteBanner from './component/DeleteBanner.vue'

const AddBannerView = ref(false)
const EditBannerView = ref(false)
const DeleteBannerView = ref(false)

// 列表内容
const tableData = ref()
// 获取当行数据
const Row_List = ref()
const Row = reactive(Row_List)
// 列表List渲染
const column = reactive([
   {
      label: "轮播图",
      prop: "banner_src",
      width: 150,
   },
   {
      label: "轮播图修改时间",
      prop: 'banner_update_time',
      width: 200,
   },
])


onMounted(() => {
   getBannerList_admin().then((res) => {
      tableData.value = res.data
   })
})


function handleUpdate(index) {
   Row_List.value = index
}

</script>
<style></style>